<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增删改查</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }

        #d1 {
            background: red;
        }

        #d2 {
            background: blue;
        }

        #d3 {
            background: purple;
        }

        #d4 {
            background: pink;
        }
    </style>
</head>
<body>

    <button onclick="addNode()">增加</button>
    <button onclick="removeNode()">删除</button>
    <button onclick="replaceNode()">替换</button>
    <button onclick="copyNode()">克隆</button>
    <hr>
    <div id="d1">
        d1
    </div>
    <div id="d2">
        d2
    </div>
    <div id="d3">
        d3
        <p>
            这是一个段落
        </p>
    </div>
    <div id="d4">
        d4
    </div>
</body>
<script>
    function  copyNode(){
        // 获取d3元素
        var objDiv3 = document.getElementById('d3')
        //克隆div元素
        var newDiv3 = objDiv3.cloneNode(true)
        //获取父元素
        var objParent = objDiv3.parentNode
        //获取d2元素
        var objDiv2 = document.getElementById("d2")
        //通过父元素将子元素插入到d2元素之前
        objParent.insertBefore(newDiv3,objDiv2)

    }
    function replaceNode(){
        //创建一个新元素
        var objH1 = document.createElement('h1')
        objH1.innerHTML='我是一个标题'
        //获取旧元素
        var objOld = document.getElementById('d1')
        //获取父元素
        var objParent = objOld.parentNode
        //替换元素
        objParent.replaceChild(objH1,objOld)
    }

    function removeNode(){
        //获取body元素
        var objBody = document.body
        //获取删除的元素
        var objDiv = document.getElementsByTagName("div")
        //从body中删除div
        objBody.removeChild(objDiv[objDiv.length-1]) //上课讲的是这个，但是edge会报错
        // objDiv[objDiv.length-1].remove()
    }

    function addNode(){
        //获取body元素
        var objBody = document.getElementsByTagName("body")[0]
        //创建一个div元素
        var objDiv = document.createElement("div")
        //指定div的宽高、边框和背景颜色
        objDiv.style.width = '100px'
        objDiv.style.height = '100px'
        objDiv.style.border = '1px solid #000'
        var r=Math.floor(Math.random()*255)
        var g=Math.floor(Math.random()*255)
        var b=Math.floor(Math.random()*255)
        objDiv.style.background = 'rgb('+ r +','+ g +','+ b +')'
        objDiv.innerHTML='你好'
        //将div元素增加到body中
        objBody.appendChild(objDiv)
    }
</script>
</html>